<template>
    <div id="content">
        <div v-for="(content, index) in contents" :key="index">
            <h2 id="title">{{ content.title }}</h2>
            <img src="https://picsum.photos/200/200" alt="img">
            <div id="bottom">
                <span class="from">{{ content.from }}</span>
                <span class="time">{{ content.time }} 提交</span>
                <span class="read">{{ content.read }} 阅读</span>
            </div>
        </div>
    </div>
</template>


<script>

    export default {
        name: "Content", // 指定组件名
        data: function () {
            return {
                contents: [
                    {
                        title: "中外嘉宾和客商茶博会“西湖问茶”袁家军唐仁健郑栅洁参加相关活动",
                        from: "三鼎荟茶业云盟",
                        time: "2021-08-09 14:14",
                        read: parseInt(Math.random() * 150)
                    },
                    {
                        title: "中外嘉宾和客商茶博会“西湖问茶”袁家军唐仁健郑栅洁参加相关活动",
                        from: "三鼎荟茶业云盟",
                        time: "2021-08-09 14:14",
                        read: parseInt(Math.random() * 150)
                    },
                    {
                        title: "中外嘉宾和客商茶博会“西湖问茶”袁家军唐仁健郑栅洁参加相关活动",
                        from: "三鼎荟茶业云盟",
                        time: "2021-08-09 14:14",
                        read: parseInt(Math.random() * 150)
                    },
                ]
            }
        }
    }

</script>

<style lang="less" scoped>

    #content > div {
        background-color: #fff;
        width: 100vw;
        border-bottom: 1px solid rgba(199, 193, 193, .3);
        padding: 10px;

        img {
            width: 100%;
            height: 50vw;
        }
    }

    #title {
        font-size: 15px;
        font-weight: 400;
    }

    #bottom {
        display: flex;
        align-content: center;
        justify-content: flex-start;
        color: gray;
        font-size: 12px;
        font-weight: 400;

        .read {
            margin-left: auto;
        }

        span:last-of-type {
            border: none;
        }
    }
</style>